<template>
  <div>
    <div class="c-block"  >
        <el-carousel  height="600px">
            <el-carousel-item v-for="(item,index) in imageBox" :key="index">
                <img :src="item" style="width:100%;height:100%" alt="轮播图宣传位"/>
            </el-carousel-item>
        </el-carousel>
    </div>
    <div class="layout-main" >
        <div class="tsunagi">
            <div class="text-title">汇聚铝工业相关产品</div>
            <div class="text-para">入驻企业覆盖铝工业上下游产业链</div>
            <div style="position:absolute;left:45%"><router-link :to="{path:'/supplyDemand/GoodsOverview',query:{page:1,page_Size:15,genre:1}}">查看全部供给商品></router-link></div>
        </div>


       <div class="display-box" style="margin-bottom:250px;">
            <el-tabs tab-position="top" v-model="type" style="height: 200px;" :stretch=true @tab-click="handleClick">
                <el-tab-pane name="1" label="             铝土矿               " >
                    <span slot="label" class="edFont">铝土矿</span>
                    <div style="width:1300px;display:flex;heigth:600px;overflow:hidden" v-show="type==='1'">
                        <div>
                            <img :src="imageP[0]" width="500px" height="350px"/>
                            <!-- <el-carousel  height="350px">
                                <el-carousel-item v-for="(imgg,index) in backBox" :key="index">
                                    <img :src="imgg" style="display:block" alt="轮播图宣传位"/>
                                </el-carousel-item>
                            </el-carousel> -->
                        </div>
                        <div style="position:relative;display:flex;width:100%;flex-wrap:wrap">
                            <el-card v-for="(product,index) in products" :key=index shadow="hover" style="width:33%;height:175px;cursor:pointer;position:relative">
                                <div style="font-size:13px;font-weight:bold;margin-top:8px;margin-bottom:8px;"> {{ product .goodsSkuName }} </div>
                                <div style="font-size:13px;max-width:200px;line-height:13pt;overflow:hidden;display: -webkit-box; -webkit-box-orient: vertical; -webkit-line-clamp: 2;margin-bottom:10px"> {{ product .goodsSkuDesc }} </div>
                                <div style="font-size:16px;color:red;">{{ product.goodsSkuPrice }}元/千克</div>                    
                                <div style="position:absolute;right:2px;bottom:3px;font-size:13px"><router-link :to="'/supplyDemand/goods/' + product.goodsSkuId">详情页>></router-link></div>
                            </el-card>
                        </div>
                    </div>
             </el-tab-pane>
                <el-tab-pane name="2" >                    
                    <span slot="label" class="edFont">氧化铝</span>
                    <div style="width:1300px;display:flex;heigth:600px;overflow:hidden" v-show="type==='2'">
                        <div>
                            <img :src="imageP[1]" width="500px" height="350px"/>
                        </div>
                        <div style="position:relative;display:flex;width:100%;flex-wrap:wrap">
                            <el-card v-for="(product,index) in products" :key=index  shadow="hover" style="width:33%;height:175px;cursor:pointer;position:relative">
                                <div style="font-size:13px;font-weight:bold;margin-top:8px;margin-bottom:8px;"> {{ product .goodsSkuName }} </div>
                                <div style="font-size:13px;max-width:200px;line-height:13pt;overflow:hidden;display: -webkit-box; -webkit-box-orient: vertical; -webkit-line-clamp: 2;margin-bottom:10px"> {{ product .goodsSkuDesc }} </div>
                                <div style="font-size:16px;color:red;">{{ product.goodsSkuPrice }}元/千克</div>                    
                                <div style="position:absolute;right:2px;bottom:3px;font-size:13px"><router-link :to="'/supplyDemand/goods/' + product.goodsSkuId">详情页>></router-link></div>
                            </el-card>
                        </div>
                    </div>
                    </el-tab-pane>
                
                <el-tab-pane name="3">                    
                    <span slot="label" class="edFont">电解铝</span>
                    <div style="width:1300px;display:flex;heigth:600px;overflow:hidden" v-show="type==='3'">
                        <div>
                            <img :src="imageP[2]" width="500px" height="350px"/>
                        </div>
                        <div style="position:relative;display:flex;width:100%;flex-wrap:wrap">
                            <el-card v-for="(product,index) in products" :key=index  shadow="hover" style="width:33%;height:175px;cursor:pointer;position:relative">
                                <div style="font-size:13px;font-weight:bold;margin-top:8px;margin-bottom:8px;"> {{ product .goodsSkuName }} </div>
                                <div style="font-size:13px;max-width:200px;line-height:13pt;overflow:hidden;display: -webkit-box; -webkit-box-orient: vertical; -webkit-line-clamp: 2;margin-bottom:10px"> {{ product .goodsSkuDesc }} </div>
                                <div style="font-size:16px;color:red;">{{ product.goodsSkuPrice }}元/千克</div>
                                <div style="position:absolute;right:2px;bottom:3px;font-size:13px"><router-link :to="'/supplyDemand/goods/' + product.goodsSkuId">详情页>></router-link></div>                  
                            </el-card>
                        </div>
                    </div>
                    </el-tab-pane>
                <el-tab-pane name="4">                    
                    <span slot="label" class="edFont">成品铝</span>
                    <div style="width:1300px;display:flex;heigth:600px;overflow:hidden" v-show="type==='4'">
                        <div>
                            <img :src="imageP[3]" width="500px" height="350px"/>
                        </div>
                        <div style="position:relative;display:flex;width:100%;flex-wrap:wrap">
                            <el-card v-for="(product,index) in products" :key=index  shadow="hover" style="width:33%;height:175px;cursor:pointer;position:relative">
                                <div style="font-size:13px;font-weight:bold;margin-top:8px;margin-bottom:8px;"> {{ product .goodsSkuName }} </div>
                                <div style="font-size:13px;max-width:200px;line-height:13pt;overflow:hidden;display: -webkit-box; -webkit-box-orient: vertical; -webkit-line-clamp: 2;margin-bottom:10px"> {{ product .goodsSkuDesc }} </div>
                                <div style="font-size:16px;color:red;">{{ product.goodsSkuPrice }}元/千克</div>                    
                                <div style="position:absolute;right:2px;bottom:3px;font-size:13px"><router-link :to="'/supplyDemand/goods/' + product.goodsSkuId">详情页>></router-link></div>
                            </el-card>
                        </div>
                    </div>
                </el-tab-pane>
            </el-tabs>
        </div>
        <div style="margin-bottom:30px"></div>
        <div class="tsunagi" style="transform:translateY(50px)">
            <div class='text-title'>提供需求发布平台</div>
            <div class='text-para'>更易寻找对口贸易伙伴</div>
            <div style="position:absolute;left:45%"><router-link :to="{path:'/supplyDemand/RequirementsOverview',query:{page:1,page_Size:10,genre:1}}">查看全部需求信息></router-link></div>
        </div>

        <!-- <div class="wrapper-re">
            <div class="w-left-re">
                <h4 class="cell-title">需求展示</h4>
                <div style="position:absolute;text-align:left;line-height:25px;top:140px;left:5%;width:90%">
                    包含登录用户求购信息
                </div>
                
            </div>
            <div class="w-right">
                <el-carousel class="carou-good">
                        <el-carousel-item v-for="good in goods" :key="good" type="card">
                            <el-row>
                                <el-col :span="5" v-for="item in good" :key="item.id" :offset="item.id > 0 ? 1 : 0">
                                    <el-card :body-style="{ padding: '0px' }" style="width:200px;transform:translateY(120%)">
                                        <div style="padding: 14px;">
                                                <h3>{{ item.goods_spu_name }}</h3>
                                            <div class="bottom clearfix">
                                                <p>{{ item.firmName }}</p>
                                                <p style="position:absolute;right:1px;"><router-link :to="'/supplyDemand/requirements/'+item.id">详情</router-link></p>
                                            </div>
                                        </div>
                                    </el-card>
                                </el-col>
                            </el-row>

                        </el-carousel-item>
                </el-carousel>
                <div style="position:absolute;right:1px;bottom:-10px;">
                    <el-button type="text" icon="el-icon-refresh" @click="shuffle()">换一批</el-button>
                </div>        
            </div>
        </div> -->
        <div style="padding-bottom:30px"></div>
        <div style="display:flex;margin-up:300px;margin-up:500px;position:relative;border-top:1px solid #d3dce6;border-bottom:1px solid #d3dce6">
            <div>
                <img display:block :src=imageR style="height:420px">
            </div>
            <div style="background-color:#d3dce6;height:420px">
                <div style="height:30px;width:70%;position:absolute;padding:3px;text-align:center">
                    <div style="height:30px;left:60%;font-weight:bold">最新需求</div>
                </div>
                <div  class="warp">
                    <vue-seamless-scroll :data="requList" :class-option="defaultOption" >
                        <ul class="ul-scoll">
                            <li v-for="(item, index) in requList" :key=index class="demand">

                                    <div style="position:relative;display:flex">
                                        <div style="transform:translateX(100px);font-weight:bold;font-size:18px;text-align:left;width:200px;"><router-link :to="'/supplyDemand/requirements/'+item.requirementId"><span style="float:left;font-size:14px" v-text="item.reqName"></span
                                    ></router-link></div>
                                        <div style="transform:translateX(200px);"><span style="font-size:16px;text-align:right;width:100px;" v-text="item.firmName"></span></div>  
                                        <div style="transform:translateX(300px);"><span style="float:right;font-size:16px;text-align:left;width:300px;" v-text="item.updatedDate">{{item.updatedDate}}</span></div>
                                    </div>
                            </li>
                        </ul>
                    </vue-seamless-scroll>
                </div>
            </div>
        </div>

        <div style="padding-bottom:100px"></div>
    </div>
    




    <div style="padding-bottom:30px"></div>    

  </div>    
</template>

<script>

import vueSeamlessScroll from 'vue-seamless-scroll'
import axios from "@/utils/request"
export default ({
    data(){
        return{
            url:'',
            url1:"http://localhost:8009/lv-industry-app/goodsSku/get-hit-goods",
            query_info1:{
                "type":1
            },
            url2:"http://localhost:8009/lv-industry-app/requirement/get-latest-requirements",
            type:"1",            
            imageBox:[
            require("@/assets/bg2.jpg"),
            require("@/assets/bg3.png")],
            imageR:require("@/assets/djlproduce2.jpg"),
            imageP:[require("@/assets/alubg2.jpg"),require("@/assets/yhlproduce.jpg"),require("@/assets/djlproduce.jpg"),require("../../assets/cplproduce.jpg")],
            backBox:[require("@/assets/alubg1.jpg"),require("@/assets/alubg2.jpg")],
            products:[
                {"goodsSkuId":1,"goodsSkuName":"铝矿A","goodsSkuPrice":"0.2","goodsSkuDesc":"最早1960年对克俄铝土矿床克俄矿段进行勘探，随后又对卜家峪等矿段进行了勘探，共累计探明铝土矿6265.6万吨，矿石平均品位为64.36%。1986年山西铝厂开始对孝义铝土矿进行开采。矿石类型有致密状、粗糙状和豆鲕状三种。"},
                {"goodsSkuId":2,"goodsSkuName":"铝矿B","goodsSkuPrice":"20","goodsSkuDesc":"该矿床1961～1964年以耐火粘土矿进行勘探，1966年开始投产。累计探明铝土矿949.7万吨。含矿层的地质时代与山西孝义克俄矿床的时代相同，均属晚石炭世本溪期"},
                {"goodsSkuId":3,"goodsSkuName":"铝矿C","goodsSkuPrice":"30","goodsSkuDesc":"该矿区面积有1750km2，在层状矿体分布132km长的范围内均有堆积矿石。最早1959～1961年对原生矿进行勘探。因原生矿含硫高不能利用，1974年转对堆积矿进行勘探，前后一共累计探明铝土矿储量达12609.8万t，平均品位64.69%"},
                {"goodsSkuId":4,"goodsSkuName":"铝矿A","goodsSkuPrice":"2","goodsSkuDesc":"该矿区面积有1750km2，在层状矿体分布132km长的范围内均有堆积矿石。最早1959～1961年对原生矿进行勘探。因原生矿含硫高不能利用，1974年转对堆积矿进行勘探，前后一共累计探明铝土矿储量达12609.8万t，平均品位64.69%"},
                {"goodsSkuId":5,"goodsSkuName":"铝矿B","goodsSkuPrice":"2","goodsSkuDesc":"该矿1989年进行勘探，探明储量达1112万吨，矿石平均品位为53.62%。矿层产出形状复杂，无矿天窗多，含矿系数较小，约0.5左右。"},
                {"goodsSkuId":6,"goodsSkuName":"铝矿C","goodsSkuPrice":"3","goodsSkuDesc":"该矿床是现代红土型铝土矿矿床，1959～1961年进行普查勘探，1975年对罗本5、6号等9个矿体又进行了勘探，共累计探明铝土矿储量达2190.6万吨，平均品位44.4%。"}
            ],

            items:[{"goodsSkuId":1,"goodsSkuImgurl":"https://ns-strategy.cdn.bcebos.com/ns-strategy/upload/fc_big_pic/part-00589-1295.jpg","goodsSkuName":"产品A","firmName":"A公司"},
                        {"goodsSkuId":2,"goodsSkuImgurl":"https://ns-strategy.cdn.bcebos.com/ns-strategy/upload/fc_big_pic/part-00589-1295.jpg","goodsSkuName":"产品B","firmName":"A公司"},
                        {"goodsSkuId":3,"goodsSkuImgurl":"https://ns-strategy.cdn.bcebos.com/ns-strategy/upload/fc_big_pic/part-00589-1295.jpg","goodsSkuName":"产品C","firmName":"A公司"},
                        {"goodsSkuId":4,"goodsSkuImgurl":"https://ns-strategy.cdn.bcebos.com/ns-strategy/upload/fc_big_pic/part-00589-1295.jpg","goodsSkuName":"产品D","firmName":"4公司"}],
            goods:[
                    [{"goodsSkuId":1,"goodsSkuImgurl":"https://ns-strategy.cdn.bcebos.com/ns-strategy/upload/fc_big_pic/part-00589-1295.jpg","goodsSkuName":"产品A","firmName":"A公司"},
                        {"goodsSkuId":2,"goodsSkuImgurl":"https://ns-strategy.cdn.bcebos.com/ns-strategy/upload/fc_big_pic/part-00589-1295.jpg","goodsSkuName":"产品B","firmName":"A公司"},
                        {"goodsSkuId":3,"goodsSkuImgurl":"https://ns-strategy.cdn.bcebos.com/ns-strategy/upload/fc_big_pic/part-00589-1295.jpg","goodsSkuName":"产品C","firmName":"A公司"},
                        {"goodsSkuId":4,"goodsSkuImgurl":"https://ns-strategy.cdn.bcebos.com/ns-strategy/upload/fc_big_pic/part-00589-1295.jpg","goodsSkuName":"产品D","firmName":"4公司"}]
                        ,
                    [{"goodsSkuId":5,"goodsSkuImgurl":"https://ns-strategy.cdn.bcebos.com/ns-strategy/upload/fc_big_pic/part-00589-1295.jpg","goodsSkuName":"产品A","firmName":"A公司"},
                        {"goodsSkuId":6,"goodsSkuImgurl":"https://ns-strategy.cdn.bcebos.com/ns-strategy/upload/fc_big_pic/part-00589-1295.jpg","goodsSkuName":"产品B","firmName":"A公司"},
                        {"goodsSkuId":7,"goodsSkuImgurl":"https://ns-strategy.cdn.bcebos.com/ns-strategy/upload/fc_big_pic/part-00589-1295.jpg","goodsSkuName":"产品C","firmName":"A公司"},
                        {"goodsSkuId":8,"goodsSkuImgurl":"https://ns-strategy.cdn.bcebos.com/ns-strategy/upload/fc_big_pic/part-00589-1295.jpg","goodsSkuName":"产品D","firmName":"4公司"}
                        ]
                    ],
            //首先选定标签 -> 有值之后向后端取数据 -> 渲染到卡片上显示
            group:[],
            activeIndex:0,
            productsData:[[
                {"goodsSkuId":'1',"goodsSkuName":"铝矿A","goodsSkuPrice":"0.20","goodsSkuDesc":"最早1960年对克俄铝土矿床克俄矿段进行勘探，随后又对卜家峪等矿段进行了勘探，共累计探明铝土矿6265.6万吨，矿石平均品位为64.36%。1986年山西铝厂开始对孝义铝土矿进行开采。矿石类型有致密状、粗糙状和豆鲕状三种。"},
                {"goodsSkuId":'2',"goodsSkuName":"铝矿B","goodsSkuPrice":"0.20","goodsSkuDesc":"该矿床1961～1964年以耐火粘土矿进行勘探，1966年开始投产。累计探明铝土矿949.7万吨。含矿层的地质时代与山西孝义克俄矿床的时代相同，均属晚石炭世本溪期"},
                {"goodsSkuId":'3',"goodsSkuName":"铝矿C","goodsSkuPrice":"0.30","goodsSkuDesc":"该矿区面积有1750km2，在层状矿体分布132km长的范围内均有堆积矿石。最早1959～1961年对原生矿进行勘探。因原生矿含硫高不能利用，1974年转对堆积矿进行勘探，前后一共累计探明铝土矿储量达12609.8万t，平均品位64.69%"},
                {"goodsSkuId":'4',"goodsSkuName":"铝矿A","goodsSkuPrice":"0.20","goodsSkuDesc":"该矿区面积有1750km2，在层状矿体分布132km长的范围内均有堆积矿石。最早1959～1961年对原生矿进行勘探。因原生矿含硫高不能利用，1974年转对堆积矿进行勘探，前后一共累计探明铝土矿储量达12609.8万t，平均品位64.69%"},
                {"goodsSkuId":'5',"goodsSkuName":"铝矿B","goodsSkuPrice":"0.20","goodsSkuDesc":"该矿1989年进行勘探，探明储量达1112万吨，矿石平均品位为53.62%。矿层产出形状复杂，无矿天窗多，含矿系数较小，约0.5左右。"},
                {"goodsSkuId":'6',"goodsSkuName":"铝矿C","goodsSkuPrice":"0.30","goodsSkuDesc":"该矿床是现代红土型铝土矿矿床，1959～1961年进行普查勘探，1975年对罗本5、6号等9个矿体又进行了勘探，共累计探明铝土矿储量达2190.6万吨，平均品位44.4%。"}
            ],[
                {"goodsSkuId":'11',"goodsSkuName":"氧化铝","goodsSkuPrice":"0.20","goodsSkuDesc":"每克的内表面积高达数百平方米，活性高吸附能力强。工业品常为无色或微带粉红的圆柱型颗粒，耐压性好．在石油炼制和石油化工中是常用的吸附剂、催化剂和催化剂载体；在工业上是变压器油、透平油的脱酸剂，还用于色层分析"},
                {"goodsSkuId":'12',"goodsSkuName":"氧化铝","goodsSkuPrice":"0.20","goodsSkuDesc":"不溶于水和酸，工业上也称铝氧，是制金属铝的基本原料；也用于制各种耐火砖、耐火坩埚、耐火管、耐高温实验仪器；还可作研磨剂、阻燃剂、填充料等"},
                {"goodsSkuId":'13',"goodsSkuName":"氧化铝","goodsSkuPrice":"0.30","goodsSkuDesc":"电解质制成钠－硫蓄电池。由于这种蓄电池单位重量的蓄电量大，能进行大电流放电，因而具有广阔的应用前景"},
                {"goodsSkuId":'14',"goodsSkuName":"氧化铝","goodsSkuPrice":"0.20","goodsSkuDesc":"确定如何向用户发出未显示的溢出内容信号。它可以被剪切，显示一个省略号（’…’，U + 2026 HORIZONTAL ELLIPSIS）或显示一个自定义字符串。几种样式显示效果如下"},
                {"goodsSkuId":'15',"goodsSkuName":"发氧化铝","goodsSkuPrice":"0.20","goodsSkuDesc":"不溶于水和酸，工业上也称铝氧，是制金属铝的基本原料；也用于制各种耐火砖、耐火坩埚、耐火管、耐高温实验仪器；还可作研磨剂、阻燃剂、填充料等"},
                {"goodsSkuId":'16',"goodsSkuName":"氧化铝古","goodsSkuPrice":"0.30","goodsSkuDesc":"每克的内表面积高达数百平方米，活性高吸附能力强。工业品常为无色或微带粉红的圆柱型颗粒，耐压性好．在石油炼制和石油化工中是常用的吸附剂、催化剂和催化剂载体；在工业上是变压器油、透平油的脱酸剂，还用于色层分析"}
            ],[
                {"goodsSkuId":'21',"goodsSkuName":"铝锭","goodsSkuPrice":"0.20","goodsSkuDesc":"铸造性能和焊接性能令人满意，切削加工性能和耐热强度比ZL104合金好，但塑性低，腐蚀稳定性不高，适合于各种铸造方法"},
                {"goodsSkuId":'22',"goodsSkuName":"铝锭","goodsSkuPrice":"0.20","goodsSkuDesc":"铸造性能良好，强度高，热膨胀系数小及耐磨性能好。此外，其高温性能令人满意，一般用于金属型铸造。该类合金主要用作内燃机活塞及起重滑轮等零部件"},
                {"goodsSkuId":'23',"goodsSkuName":"铝锭","goodsSkuPrice":"0.30","goodsSkuDesc":"有良好的气密性、流动性和抗热裂性能，强度高，耐腐蚀性能、焊接性能和切削加工性能良好，但耐热强度低，易产生细小的气孔，铸造工艺较复杂"},
                {"goodsSkuId":'24',"goodsSkuName":"铝锭","goodsSkuPrice":"0.20","goodsSkuDesc":"具有好的铸造性能和力学性能，很好的流动性、气密性的抗热裂性，常用作齿轮箱、空冷汽缸头、无线电发报机的机座、割草机罩子及气动刹车铸件"},

            ],[
                {"goodsSkuId":'31',"goodsSkuName":"成品铝","goodsSkuPrice":"0.20","goodsSkuDesc":"有中等强度,在退火、刚淬火和热状态下可塑性尚好,可热处理强化,在淬火和自然时效状态下使用,点焊焊接性良好，进行气焊及氩弧焊时有裂纹倾向；包铝板材有良好的腐蚀稳定性"},
                {"goodsSkuId":'32',"goodsSkuName":"成品铝","goodsSkuPrice":"0.20","goodsSkuDesc":"强度高韧性好，可配合折弯设备连续折弯成任间角度的铝框"},
                {"goodsSkuId":'33',"goodsSkuName":"成品铝","goodsSkuPrice":"0.30","goodsSkuDesc":"强度高韧性好，可配合折弯设备连续折弯成任间角度的铝框"},
                {"goodsSkuId":'34',"goodsSkuName":"成品铝","goodsSkuPrice":"0.20","goodsSkuDesc":"有中等强度,在退火、刚淬火和热状态下可塑性尚好,可热处理强化,在淬火和自然时效状态下使用,点焊焊接性良好，进行气焊及氩弧焊时有裂纹倾向；包铝板材有良好的腐蚀稳定性"},
                {"goodsSkuId":'35',"goodsSkuName":"成品铝","goodsSkuPrice":"0.20","goodsSkuDesc":"铝条表面孔透均匀，直线度好，不变形，尺寸稳定"},
                {"goodsSkuId":'36',"goodsSkuName":"成品铝","goodsSkuPrice":"0.30","goodsSkuDesc":"铝条表面孔透均匀，直线度好，不变形，尺寸稳定"}
            ],
            ],
            requList:[
                {"requirementId":"3","reqType":"1","reqName":"凤阳铝土矿","firmName":"A公司","updatedDate":"2021-06-02"},
                {"requirementId":"4","reqType":"2","reqName":"安徽氧化铝","firmName":"D公司","updatedDate":"2021-06-02"},
                {"requirementId":"5","reqType":"3","reqName":"柳钢柳条","firmName":"C公司","updatedDate":"2021-06-01"},
                {"requirementId":"9","reqType":"4","reqName":"贵阳铝土矿","firmName":"B公司","updatedDate":"2021-06-01"},
                {"requirementId":"13","reqType":"1","reqName":"贵阳铝土矿","firmName":"A公司","updatedDate":"2021-05-31"},
                {"requirementId":"14","reqType":"2","reqName":"安徽氧化铝","firmName":"D公司","updatedDate":"2021-05-31"},
                {"requirementId":"15","reqType":"3","reqName":"贵阳铝锭","firmName":"C公司","updatedDate":"2021-05-21"},
                {"requirementId":"19","reqType":"4","reqName":"贵阳铝土矿","firmName":"B公司","updatedDate":"2021-04-01"},
            ],
        };
    },
    components: {
        vueSeamlessScroll
    },
    computed:{
        top(){
            return -this.activeIndex * 20 + 'px';
        },
        defaultOption () {
            return {
                step: 0.2, // 数值越大速度滚动越快
                limitMoveNum: 3, // 开始无缝滚动的数据量 this.dataList.length
                hoverStop: true, // 是否开启鼠标悬停stop
                direction: 1, // 0向下 1向上 2向左 3向右
                openWatch: true, // 开启数据实时监控刷新dom
                singleHeight: 0, // 单步运动停止的高度(默认值0是无缝不停止的滚动) direction => 0/1
                singleWidth: 0, // 单步运动停止的宽度(默认值0是无缝不停止的滚动) direction => 2/3
                waitTime: 1000 // 单步运动停止的时间(默认值1000ms)
            }
        }
    },
    created()
    {
        this.getHitGoods()
        // getHitGoods()改成读取所有的数据
        // console.log(this.requList)
        this.getHitRequirements()
    },
    methods:{

                async getHitGoods()
                {
                    
                    // const{data:res} = await axios.get(this.url1,this.query_info1)
                    // this.products = res.data
                    var tmp = []
                    for(var i=1;i < 5;i++)
                    {
                        this.query_info1.type = i
                        await axios.get(this.url1,{params:this.query_info1}).then((result)=>{
                            
                            if(result.success == true)
                            {
                                // this.productsData = result.data
                                tmp.push(result.data)
                            }
                        })
                    }
                    if(tmp.length > 0)
                    {
                        this.productsData = tmp
                    }
                    this.products = this.productsData[Number(this.type)-1]
                },
                async getHitRequirements()
                {
                    // const{data:res} = await axios.get(this.url2)
                    // this.requList = res.data
                    await axios.get(this.url2).then((result)=>{
                        
                        if(result.success == true)
                        {
                            
                            this.requList = result.data
                        }
                        console.log(this.requList)
                        
                    })
                },
                shuffle(arr){
                    var len = arr.length;
                    for(var i=0;i<len;i++){
                        var rand = Math.floor(Math.random()*(i+1));
                        [arr[i],arr[rand]] = [arr[rand],arr[i]];
                    }
                    return arr;
                    /*
                    return getRandomRequirements()
                    */
                },
                //每个value值对应一个数据列表
                onClickPanel(value)
                {
                    //this.$http.post("backend".{param:{value}})
                    //datas[value] = this.$http.post("backend".{param:{value}})

                    this.datas[value] = {}
                },
                handleClick() {

                    this.query_info1.type = Number(this.type)
                    // this.productsData = this.getHitGoods()
                    this.products = this.productsData[Number(this.type)-1];
                }                

        }
    
    })
</script>


<style  scoped>
.banner {
  width: 100%;
  height: 520px;
  background-image: linear-gradient(90deg);
  border: solid 1px #707070;
}

.c-block
{
    width:100%;
    position:relative;
    margin-bottom:70px;

}

.scroll-wrap {
    height: 150px;
    overflow: hidden;
}

.scroll-content {
    position: relative;
    transition: top 0.5s;
}

.scroll-content p {
    line-height: 50px;
    text-align: center;
    
}

.carou-good
{
    height:400px;

}


.edg
{
  position:absolute;
  right:50px;
}

.LoginWrapper
{
    background-color:blanchedalmond;
    display:flex;
    height:70px;
    width:99%;
    position:absolute;
    top:0px;
    align-items: center;
}
.left
{
    flex-grow: 0;
    font-size:30px;
    font-family:Microsoft JhengHei;
}
.middle
{
    flex-grow:1;
}
.right
{
    position: relative;
}
#status-bar
{
    display:flex;
    align-items: center;
}

.wrapper-goods
{
    display: flex;
    height:400px;
    margin-bottom:50px;
    margin-top:50px;
    box-shadow: grey 0px 0px 30px 2px ;
}

.layout-main
{
    margin-left: 100px;
    margin-right: 100px
}

.w-goods-left
{
    /* border:1px solid rgb(14, 14, 17); */
    width:15%;
    height:328px;
    position:relative;
    background-color:burlywood;
    text-align: center;
}

.cell-title
{
    font-size:30px;
    font-family: "Microsoft JaHei";
    position:absolute;
    top:25%;
    left:15%;
}

.tobu-inter
{
    font-size:15px;
    font-family: "Microsoft JaHei";
    position:absolute;
    bottom:-8px;
    right:4px;
}

.w-right
{
    box-sizing:border-box;
    position:relative;
    height:600px;
    flex-grow: 1;
    overflow:hidden
}

.wrapper-re
{
    display: flex;
    height:300px;
    margin-bottom:50px;
    margin-top:50px;
    box-shadow: grey 0px 0px 30px 2px ;
}

.layout-main
{
    margin-left: 100px;
    margin-right: 100px
}

.tsunagi
{
    text-align: center;
    line-height:43px;
    margin-bottom:120px;
    margin-top:120px;
}

.text-title
{
    font-size:38px;
    font-family: "Microsoft Jahei";
    font-weight: bold;
    margin-bottom:8px;
}

.text-para
{
    font-size:22px;
    font-family: "Microsoft Jahei";
}


.w-left-good
{
    width:15%;
    height:100%;
    /* box-shadow: grey 0px 0px 30px 2px ; */
    position:relative;
    background-image:url("../../assets/bg5.jpg");
    text-align: center;
}

.w-left-re
{
    width:15%;
    height:100%;
    background-image: url("../../assets/bg6.jpg");
    /* box-shadow: grey 0px 0px 30px 2px ; */
    position:relative;
    background-color:burlywood;
    text-align: center;
}



.tobu-inter
{
    font-size:15px;
    font-family: "Microsoft JaHei";
    position:absolute;
    bottom:10px;
    right:5px;
}

.tobu-inter2
{
    font-size:15px;
    font-family: "Microsoft JaHei";
    position:absolute;
    bottom:30px;
    right:5px;
}


.w-right
{
   
    /* box-shadow: grey 0px 0px 30px 2px ; */
    box-sizing:border-box;
    position:relative;
    height:100%;
    flex-grow: 1;
    overflow:hidden
}

.time {
    font-size: 13px;
    color: #999;
  }
  
  .bottom {
    position:relative;
    margin-top: 13px;
    line-height: 12px;
    display:flex;
  }

  .button {
    padding: 0;
    float: right;
  }

  .image {
    width: 100%;
    display: block;
  }

  .clearfix:before,
  .clearfix:after {
      display: table;
      content: "";
  }
  
  .clearfix:after {
      clear: both
  }

  .el-row {
    margin-bottom: 20px;
  }

  .el-row .last-child
  {
    margin-bottom: 0;
  }

  .edFont
  {
      font-size:20px;
      
  }


  .el-col {
    border-radius: 4px;
  }
  .bg-purple-dark {
    background: #99a9bf;
  }
  .bg-purple {
    background: #d3dce6;
  }
  .bg-purple-light {
    background: #e5e9f2;
  }
  .grid-content {
    border-radius: 4px;
    min-height: 36px;
  }
  .row-bg {
    padding: 10px 0;
    background-color: #f9fafc;
  }

.page-example3{
    width: 600px;
    height: 400px;
    overflow: hidden;

}


.seamless-warp
{
    position:absolute;
    right:8cm;
    height: 350px;
    overflow: hidden;
    padding-bottom: 40px;
}

.el-card:hover{
    margin-top: -5px;
    box-shadow:10px 10px 5px #979595
}


  .warp {
    position:absolute;
    bottom:0px;
    height: 90%;
    width: 800px;
    /* margin: 0 auto; */
    overflow: hidden;
    
  }

  .warp .ul-scoll li{
        cursor:pointer;
        padding: 5px;
}
  .warp ul {
      list-style: none;
      padding: 0;
      margin: 0 auto;}
  .warp li,a
  {
     list-style: none;
      padding: 0;
      margin: 0 auto; 
        display: block;
        height: 30px;
        line-height: 30px;
        
        display: flex;
        justify-content: space-between;
        font-size: 15px;
  }
  .warp .ul-scoll li span
  {
      justify-content: space-between;
      font-size:18px;
  }
  
#req-w
{
    align-items:center
}

#tekitou
{
    height:100%;
    position: relative;
    background-image: url("../../assets/bg6.jpg");
}
</style>